<template>
	<view class="content">
		<image mode="widthFix" class="banner" src="@/static/images/member/member-bg.png" />
		<view class="front">
			<view class="member-header">
				<!-- 头像 -->
				<view class="avatar">
					<image
						class="image"
						v-if="userInfo && userInfo.headUrl"
						:src="userInfo.headUrl"
					/>
					<image class="image" v-else src="@/static/images/member/default-avatar.png" />
					<text v-if="!token" class="login" @tap="toLogin">立即登录</text>
					<view class="right" v-else>
						<text class="text">{{ userInfo.nickName || '' }}</text>
						<view class="money"
							>已为您节省¥{{ totalMoney + couponMoney || '0.00' | Fixed(2) }}元</view
						>
					</view>
				</view>

				<view v-for="(perm, index) in permInfo.common" :key="index">
					<!-- 轮播 -->
					<swiper
						class="swiper"
						:autoplay="true"
						:vertical="true"
						:interval="3000"
						:duration="500"
						:circular="true"
						:disable-touch="true"
						v-if="perm.name === 'isShelf' && perm.status === 1"
					>
						<swiper-item
							class="swiper-item"
							v-for="(item, index) in logList"
							:key="index"
						>
							<view class="item">
								<image class="image" :src="item.headUrl" v-if="item.headUrl" />
								<image
									class="image"
									src="@/static/images/member/default-avatar.png"
									v-else
								/>
								{{ item.time + '秒前 ' + item.nickName + '提现了'
								}}{{ item.money | withdraw_money }}元
							</view>
						</swiper-item>
					</swiper>
					<!-- 我的钱包 -->
					<view class="member-money" v-if="perm.name === 'isShelf' && perm.status === 1">
						<view class="header">
							<image mode="widthFix" class="image" src="@/static/icons/money.png" />
							<text>我的钱包</text>
						</view>
						<view class="money-list">
							<view class="money-item line" @tap="navDetail(0)">
								<text>¥{{ totalMoney || '0.00' | Fixed(2) }}</text>
								<text class="text">累计补贴</text>
							</view>
							<view class="money-item line" @tap="navDetail(1)">
								<text>¥{{ userInfo.notCommission || '0.00' | Fixed(2) }}</text>
								<text class="text">入账中</text>
							</view>
							<view class="money-item line" @tap="navDetail(2)">
								<text>¥{{ userInfo.alreadyCommission || '0.00' | Fixed(2) }}</text>
								<text class="text">已入账</text>
							</view>
							<view class="money-item" @tap="navDetail(3)">
								<text>¥{{ userInfo.balance || '0.00' | Fixed(2) }}</text>
								<text class="text">可提现</text>
								<view class="flag">提现</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 设置列表 -->
			<template v-for="(perm, index) in permInfo.common">
				<view class="menu-list" v-if="perm.name === 'isShelf'">
					<view class="menu-item" @tap="toMenu('order')">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/order.png" />
							我的订单
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('package')" v-if="perm.status === 1">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/package.png" />
							积分红包
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('record')" v-if="perm.status === 1">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/record.png" />
							提现记录
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('balance')" v-if="perm.status === 1">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/balance.png" />
							我的余额
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('assets')" v-if="perm.status === 1">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/assets.png" />
							资金明细
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('collect')">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/collect.png" />
							我的收藏
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
				</view>
			</template>

			<block v-for="(perm, index) in permInfo.common" :key="index">
				<view class="menu-list" v-if="perm.name === 'isShelf'">
					<view class="menu-item" @tap="toMenu('help')" v-if="perm.status === 1">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/help.png" />
							常见问题
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('service')">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/service.png" />
							客服中心
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('opinion')">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/opinion.png" />
							意见反馈
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('score')">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/images/tabbar/integral-active.png" />
							好评鼓励
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
					<view class="menu-item" @tap="toMenu('setting')">
						<view class="left">
							<image mode="widthFix" class="icon" src="@/static/icons/setting.png" />
							设置
						</view>
						<text class="iconfont icon-xiayiye"></text>
					</view>
				</view>
			</block>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'center',
	data() {
		return {
			token: null,
			logList: [],
			couponMoney: 0,
			totalMoney: 0
		};
	},
	onLoad() {
		// 静默清除缓存
		this.clearStorage();
	},
	onShow() {
		// 存在token获取用户信息
		if (uni.getStorageSync('token')) {
			this.token = uni.getStorageSync('token');
			// 获取用户信息
			// #ifdef H5
			this.$store.dispatch('getUserInfo', { versionCode: 140 });
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
				let params = { ...wgtinfo };
				this.$store.dispatch('getUserInfo', params);
			});
			// #endif

			// 获取用户下单领券总额
			this.$service.member.userHf.couponMoney().then(res => {
				this.couponMoney = parseFloat(res);
			});

			// 获取累计补贴
			this.$service.member.userHf.cumulativeSubsidy().then(res => {
				this.totalMoney = res.subDate.totalMoney;
			});
		} else {
			this.token = null;
			this.totalMoney = 0;
			this.couponMoney = 0;
		}

		// 获取他人提现记录
		this.$service.member.withdraw
			.getLog({
				num: 10
			})
			.then(res => {
				this.logList = res;
			});

		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	computed: {
		...mapGetters(['userInfo', 'permInfo'])
	},
	methods: {
		toMenu(path) {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/common/login',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
				return false;
			}
			if (path === 'package') {
				this.$Router.push('/pages/integral/money');
			} else if (path === 'score') {
				if (uni.getSystemInfoSync().platform == 'android') {
					let appurl = "market://details?id=com.sdfnttbbveerr.tt";
					 // 这个是通用应用市场，如果想指定某个应用商店，需要单独查这个应用商店的包名或scheme及参数
					plus.runtime.openURL(appurl);
				} else if (uni.getSystemInfoSync().platform == 'ios') {
					plus.runtime.openURL('itms-apps://itunes.apple.com/cn/app/id1514914992?mt=8&action=write-review');
				}
			} else {
				this.$Router.push('/pages/member/' + path);
			}
		},
		navDetail(index) {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/common/login',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
				return false;
			}
			switch (index) {
				case 0:
					this.$Router.push('/pages/member/subsidy');
					break;
				case 1:
					this.$Router.push({
						path: '/pages/member/order',
						query: {
							type: 0
						}
					});
					break;
				case 2:
					this.$Router.push({
						path: '/pages/member/order',
						query: {
							type: 1
						}
					});
					break;
				case 3:
					this.$Router.push('/pages/member/balance');
					return;
			}
		},
		toLogin() {
			uni.navigateTo({
				url: '/pages/common/login',
				animationType: 'slide-in-bottom',
				animationDuration: 300
			});
		},
		// 清除缓存
		clearStorage() {
			let os = plus.os.name;
			if (os === 'Android') {
				let main = plus.android.runtimeMainActivity();
				let sdRoot = main.getCacheDir();
				let files = plus.android.invoke(sdRoot, 'listFiles');
				let len = files.length;
				for (let i = 0; i < len; i++) {
					let filePath = '' + files[i];
					plus.io.resolveLocalFileSystemURL(
						filePath,
						entry => {
							if (entry.isDirectory) {
								// 递归删除其下的所有文件及子目录
								entry.removeRecursively(
									entry => {},
									e => {}
								);
							} else {
								entry.remove();
							}
						},
						e => {}
					);
				}
			} else {
				plus.cache.clear(() => {});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #f7f6f9;
	position: relative;
	margin-top: -3rpx;
	min-height: 100vh;
	padding-bottom: 30rpx;
	.banner {
		width: 100%;
		position: absolute;
	}

	.front {
		width: 100%;
		padding: 50rpx 20rpx 0;
		position: relative;

		.member-header {
			.avatar {
				padding: 34rpx 20rpx;
				@include flexBox(null, space-around);

				.image {
					width: 110rpx;
					height: 110rpx;
					overflow: hidden;
					border-radius: 50%;
					margin-right: 28rpx;
				}

				.right {
					@include flexBox(space-around, null, column);

					.money {
						background: linear-gradient(90deg, #f7d38b, #f5c177);
						color: #9a0c00;
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
					}
				}

				.login {
					color: #fff;
					font-size: 26rpx;
					@include flexBox(null, center);
				}

				.text {
					font-size: 32rpx;
					color: #fff;
				}
			}

			.swiper {
				height: 46rpx;
				padding: 0 20rpx;

				.swiper-item {
					.item {
						background: #ff3847;
						line-height: 46rpx;
						width: fit-content;
						color: #fff;
						padding-right: 30rpx;
						border-radius: 50rpx;
						@include flexBox(null, center);

						.image {
							width: 46rpx;
							height: 46rpx;
							margin-right: 20rpx;
							border-radius: 50%;
						}
					}
				}
			}

			.member-money {
				height: 230rpx;
				background: #fff;
				padding: 24rpx;
				border-radius: 16rpx;
				margin-top: 30rpx;

				.header {
					color: #171717;
					font-size: 28rpx;
					@include flexBox(null, center);

					.image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}

				.all-money {
					text-align: center;
					.title {
						font-size: 28rpx;
						color: #171717;
					}
					.text {
						font-size: 36rpx;
						color: $main-color;
					}
				}

				.money-list {
					padding: 30rpx 0;
					@include flexBox(space-between);

					.money-item {
						width: 25%;
						color: $main-color;
						font-size: 36rpx;
						position: relative;
						@include flexBox(center, center, column);

						.text {
							font-size: 24rpx;
							color: #717076;
						}

						.flag {
							position: absolute;
							top: -30rpx;
							right: 10rpx;
							background: #fe1b34;
							color: #fff;
							font-size: 20rpx;
							padding: 0 8rpx;
							border-radius: 16rpx 8rpx 16rpx 0;
						}
					}

					.line {
						border-right: 2rpx solid #e8e8e8;
					}
				}
			}
		}
	}

	.menu-list {
		width: 100%;
		font-size: 28rpx;
		border-radius: 16rpx;
		color: #171717;
		text-align: center;
		background: rgba(255, 255, 255, 1);
		margin: 20rpx auto;
		padding: 0 30rpx;
		box-sizing: border-box;

		.menu-item {
			width: 100%;
			padding: 20rpx 0;
			@include flexBox(space-between);

			.left {
				@include flexBox(null, center);

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.iconfont {
				color: #c6c6c6;
			}
		}
	}
}
</style>
